<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Translate System</title>
<meta th:include="/admin/head :: header"></meta>
</head>

<style>
body {
	background: #ededed;
}
.modal-dialog{
	margin-top:40px;
}
#toolbar{
	float:right;
	margin:5px;
	padding: 5px;
}
</style>

<body>
	<div class="header">
		<h1 class="page-header">
			单词管理 <small></small>
		</h1>
		<ol class="breadcrumb">
			<li><a href="/admin/word/word-list">主页</a></li>
			<li><a href="/admin/word/word-list">单词管理</a></li>
			<li class="active">数据</li>
		</ol>
	</div>
	<div id="page-inner">
		<div class="row">
			<div class="col-md-12">
				<!-- Advanced Tables -->
				<div class="panel panel-default">
					<div class="panel-heading">修改的单词表</div>
					<div class="panel-body">
						<form class="form-horizontal" role="form" action="/admin/word/word-change-list">
							<div class="form-group">
								<div class="col-sm-2">
									<input type="text" placeholder="单词标志" class="form-control" id="wordId" name="wordId" th:value="${wordId}"/>
								</div>
								<div class="col-sm-1">
									<button class="btn btn-success" type="submit">搜索</button>
								</div>
								<div class="col-sm-7"></div>
								<div class = "col-sm-1">
										<select id="countrySelect" multiple="multiple">
											<option value="4" selected="selected">en</option>
											<option value="5" selected="selected">zh-rCN</option>
											<option value="6" selected="selected">zh</option>
											<option value="7" selected="selected">zh-rSG</option>
											<option value="8" selected="selected">ar</option>
											<option value="9" selected="selected">de</option>
											<option value="10" selected="selected">es</option>
											<option value="11" selected="selected">fr</option>
											<option value="12" selected="selected">hi</option>
											<option value="13" selected="selected">in</option>
											<option value="14" selected="selected">it</option>
											<option value="15" selected="selected">ja</option>
											<option value="16" selected="selected">ko</option>
											<option value="17" selected="selected">ms</option>
											<option value="18" selected="selected">pt</option>
											<option value="19" selected="selected">ru</option>
											<option value="20" selected="selected">th</option>
											<option value="21" selected="selected">tl</option>
											<option value="22" selected="selected">tr</option>
											<option value="23" selected="selected">ur-rPK</option>
											<option value="24" selected="selected">vi</option>
											
										</select>
								</div>
							</div>
							
						</form>
						<div class="table-responsive">
							<table class="table table-striped table-bordered table-hover"
								id="table_dataTable">
								<thead>
									<tr>
										<th>单词标志</th>
										<th>文件名</th>
										<th>创建时间</th>
										<th>操作</th>
										<th>en</th>
										<th>zh-rCN</th>
										<th>zh</th>
										<th>zh-rSG</th>
										<th>ar</th>
										<th>de</th>
										<th>es</th>
										<th>fr</th>
										<th>hi</th>
										<th>in</th>
										<th>it</th>
										<th>ja</th>
										<th>ko</th>
										<th>ms</th>
										<th>pt</th>
										<th>ru</th>
										<th>th</th>
										<th>tl</th>
										<th>tr</th>
										<th>ur-rPK</th>
										<th>vi</th>
									</tr>
								</thead>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>
	
		<!-- 模态框（Modal） -->
	<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog" style="top:50%; left:50%; margin:0px">
	      	<div>
	      		<img style="width:50px; height:50px" alt="加载中......" src="/images/ajax-loader.gif"/>
	      	</div>
	    </div><!-- /.modal -->
	</div>
	
	
	
	<script>
	//<![CDATA[
		 $(document).ready(function(){
        	var table = $("#table_dataTable").DataTable({
        		
        	language: {
        		     "sProcessing": "处理中...",
        		        "sLengthMenu": "显示 _MENU_ 项结果",
        		        "sZeroRecords": "没有匹配结果",
        		        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        		        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        		        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        		        "sInfoPostFix": "",
        		        "sSearch": "搜索:",
        		        "sUrl": "",
        		        "sEmptyTable": "表中数据为空",
        		        "sLoadingRecords": "载入中...",
        		        "sInfoThousands": ",",
        		        "oPaginate": {
        		            "sFirst": "首页",
        		            "sPrevious": "上页",
        		            "sNext": "下页",
        		            "sLast": "末页"
        		        },
        		        "oAria": {
        		            "sSortAscending": ": 以升序排列此列",
        		            "sSortDescending": ": 以降序排列此列"
        		        }
        		},
        		dom: 'l<"#toolbar">rtip',
        		searching: false, //禁止搜索
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                order: [[ 2, "desc" ]],
                columnDefs:[{
                	orderable:false,
                	targets:3
                }],
        		ajax: {
        			url:"/admin/word/getWordChange",
        			dataSrc: function(json){
        				if(!json.data)
        					json.data=[];
        				console.log(json);
        				return json.data;
        			},
        			data:function(data){
        				var orderColumn = data.order[0].column;
        				var orderWay =  data.order[0].dir;
        				var orderBy  = data.columns[orderColumn].data+" "+orderWay;
            			var wordId = $('#wordId').val();
        				data.orderBy = orderBy;
            			data.wordId = wordId;
        				console.log("wordId:"+wordId);
        			}
        		},

        		columns:[
        			{data:'wordId'},
        			{data:'fileName'},
        			{data:'createTime',render:function(data,type,row,meta){
        				return (new Date(data)).format("yyyy-MM-dd hh:mm:ss");
        			}},
        			{data:null},
        			{data:'en'},
        			{data:'zh_rCN'},
        			{data:'zh'},
        			{data:'zh_rSG'},
        			{data:'ar'},
        			{data:'de'},
        			{data:'es'},
        			{data:'fr'},
					{data:'hi'},
					{data:'india'},
					{data:'it'},
					{data:'ja'},
					{data:'ko'},
					{data:'ms'},
					{data:'pt'},
					{data:'ru'},
					{data:'th'},
					{data:'tl'},
					{data:'tr'},
					{data:'ur_rPK'},
					{data:'vi'}
        		],
        		columnDefs:[{
        			targets:3,
        			data:null,
        			render:function(data, type, row){
        				var id = row.wordId;
        				var html = '<a type="button" class="btn btn-primary" href="/admin/word/word-change-edit-index?wordId='+id+'">编辑</a>';
        				return html;
        			}
        		}],
            	initComplete:function(){
                    $("#toolbar").append('<button class = "btn btn-warning" type="button" id="commit" onclick="commit();">提交</a>');
           		}
        	});
			$('#countrySelect').multiselect({
				allSelectedText: '选择语言',
				onChange:function(option, checked){
					var value = option.val();
					console.log(value);
					var column = table.column(value);
					column.visible( !column.visible() );
				}
			});
        });
	//]]>
	</script>
	
	<script>
		function commit(){
			$.ajax({
				url:"/admin/word/commit",
				beforeSend:function(){
					$('#loadingModal').modal({backdrop: 'static', keyboard: false});	
				},
 	 			complete:function(){
					$('#loadingModal').modal('hide');
					location.href = "/admin/word/word-change-list";
				} 
				
			});
		}
	</script>
	
	
</body>
</html>